<template>
	<view class="container">
		<!-- 状态栏 -->
		<view class="status-bar"></view>
		
		<!-- 头部 -->
		<view class="header">
			<view class="user-info">
				<SimpleAvatar 
					class="avatar" 
					@click="goToProfile" 
					:clickable="true"
				/>
				<text class="title">故障报修</text>
			</view>
		</view>
		
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 横幅 -->
			<view class="banner">
				<text class="banner-title">智慧维保</text>
				<text class="banner-subtitle">让报修更简单</text>
			</view>
			
			<!-- 功能按钮区域 -->
			<view class="main-actions">
				<!-- 1. 添加报修 -->
				<view class="action-item" @click="goToAddRepair">
					<view class="action-icon orange">
						<text class="icon-text">✅</text>
					</view>
					<text class="action-title">添加报修</text>
				</view>
				
				<!-- 2. 报修记录 -->
				<view class="action-item" @click="goToRecords">
					<view class="action-icon blue">
						<text class="icon-text">📋</text>
					</view>
					<text class="action-title">报修记录</text>
				</view>
				
				<!-- 3. 草稿箱 -->
				<view class="action-item" @click="goToDrafts">
					<view class="action-icon green">
						<text class="icon-text">📂</text>
					</view>
					<text class="action-title">草稿箱</text>
				</view>
				
				<!-- 4. 维修指派 -->
				<view class="action-item" @click="goToWorkOrders">
					<view class="action-icon purple">
						<text class="icon-text">🔧</text>
					</view>
					<text class="action-title">维修指派</text>
				</view>
			</view>
		</view>
		
		<!-- 底部导航栏 -->
		<view class="bottom-nav">
			<view class="nav-item" @click="goToWorkbench">
				<text class="nav-icon">⊞</text>
				<text class="nav-text">工作台</text>
			</view>
			<view class="nav-item" @click="goToAssetManagement">
				<text class="nav-icon">📦</text>
				<text class="nav-text">资产管理</text>
			</view>
			<view class="nav-item active">
				<text class="nav-icon">📋</text>
				<text class="nav-text">故障报修</text>
			</view>
			<view class="nav-item" @click="goToRepairs">
				<text class="nav-icon">🔧</text>
				<text class="nav-text">故障维修</text>
			</view>
			<view class="nav-item" @click="goToMore">
				<text class="nav-icon">⋯</text>
				<text class="nav-text">更多</text>
			</view>
		</view>
	</view>
</template>

<script>
	import navigation from '@/utils/navigation.js'
	import permissionManager from '@/utils/permission.js'
	
	export default {
		components: {
			SimpleAvatar: () => import('@/components/SimpleAvatar.vue')
		},
		methods: {
			// 检查是否为维修主管或维修工长
			isMaintenanceManager() {
				try {
					if (!permissionManager) {
						return false;
					}
					
					const isManager = permissionManager.hasRole('maintenance_manager');
					const isForeman = permissionManager.hasRole('maintenance_foreman');
					return isManager || isForeman;
				} catch (error) {
					return false;
				}
			},
			
			// 跳转到个人中心
			goToProfile() {
				uni.navigateTo({
					url: '/pages/user/profile'
				});
			},
			
			// 显示更多选项
			showMoreOptions() {
				uni.showActionSheet({
					itemList: ['设置', '帮助', '关于'],
					success: (res) => {
						console.log('选择了第' + (res.tapIndex + 1) + '个按钮');
					}
				});
			},
			
			goToAddRepair() {
				// 检查维修主管权限
				if (this.isMaintenanceManager()) {
					uni.showModal({
						title: '权限不足',
						content: '您没有权限访问此功能',
						showCancel: false
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/repair/add'
				});
			},
			
			goToRecords() {
				// 检查维修主管权限
				if (this.isMaintenanceManager()) {
					uni.showModal({
						title: '权限不足',
						content: '您没有权限访问此功能',
						showCancel: false
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/repair/records'
				});
			},
			
			goToDrafts() {
				// 检查维修主管权限
				if (this.isMaintenanceManager()) {
					uni.showModal({
						title: '权限不足',
						content: '您没有权限访问此功能',
						showCancel: false
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/repair/drafts'
				});
			},
			
			goToWorkOrders() {
				// 维修指派功能允许维修主管访问，无需权限检查
				uni.navigateTo({
					url: '/pages/repair/work-orders'
				});
			},
			
			// 底部导航跳转
			goToWorkbench() {
				navigation.goToWorkbench();
			},
			
			goToAssetManagement() {
				navigation.goToAssetManagement();
			},
			
			goToRepairs() {
				navigation.goToRepairs();
			},
			
			goToMore() {
				navigation.goToMore();
			}
		}
	}
</script>

<style scoped>
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: white;
}

.status-bar {
	height: 44px;
	background-color: white;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background-color: white;
}

.user-info {
	display: flex;
	align-items: center;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.title {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
}

.header-action {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.action-icon {
	font-size: 32rpx;
	color: #666;
}

.main-content {
	flex: 1;
	padding: 20px;
}


.banner {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	padding: 30px 20px;
	margin-bottom: 30px;
	text-align: right;
	color: white;
}

.banner-title {
	display: block;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 8px;
}

.banner-subtitle {
	display: block;
	font-size: 16px;
	opacity: 0.9;
}

.main-actions {
	display: flex;
	flex-direction: row;
	gap: 8px;
	margin-bottom: 30px;
	justify-content: space-between;
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: white;
	border-radius: 20rpx;
	padding: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	flex: 1;
}

.action-icon {
	width: 120rpx;
	height: 120rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12rpx;
}

.action-icon.orange {
	background-color: #ff9800;
}

.action-icon.blue {
	background-color: #ff9800;
}

.action-icon.green {
	background-color: #4caf50;
}

.action-icon.purple {
	background-color: #9c27b0;
}

.icon-text {
	font-size: 48rpx;
	color: white;
}

.action-title {
	font-size: 24rpx;
	color: #333;
	font-weight: bold;
	text-align: center;
}

.bottom-nav {
	display: flex;
	background-color: white;
	border-top: 1px solid #e0e0e0;
	padding: 8px 0;
}

.nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 4px;
	position: relative;
}

.nav-item.active {
	color: #4a94ff;
}

.nav-icon {
	font-size: 20px;
	margin-bottom: 4px;
}

.nav-text {
	font-size: 12px;
	color: #666;
}

.nav-item.active .nav-text {
	color: #4a94ff;
}
</style>